$bg: #2d3a4b;
$dark_gray: #aaa;
$light_gray: #eee;

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}

.login-container1 {
  background: url(../../assets/citic-bg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 86vh;
  position: relative;
  overflow: hidden;

  .ball-img {
    width: 550px;
    height: 550px;
    position: absolute;
    top: calc((86vh - 550px) / 2);
    left: 15%;
    background: url(../../assets/ball.png) 100% no-repeat;
    background-size: 100% 100%;
    -webkit-transform: rotate(360deg);
    animation: rotation 25s ease-in-out infinite;
    -moz-animation: rotation 25s ease-in-out infinite;
    -webkit-animation: rotation 25s ease-in-out infinite;
  }

  .login-info {
    position: absolute;
    left: 15%;
    top: 60%;
    margin-top: -200px;
    color: rgb(255, 255, 255);
    font-weight: 600;

    .title {
      font-size: 1.8rem;
      font-weight: 600;
    }

    .sub-title {
      font-size: 1.5rem;
      margin: 0.3rem 0 0.7rem 1rem;
    }

    .desc {
      font-size: 0.96rem;
      line-height: 1.9rem;
    }
  }

  .login-form {
    position: absolute;
    top: calc((86vh - 420px) / 2);
    right: 15%;
    // transform: translateY(-50%);
    margin: 0px 0 0 -160px;
    width: 340px;
    height: 420px;
    //width: 435px;
    //height: 330px;
    padding: 16px;
    // background: url(../../assets/kuang.png) no-repeat;
    background-color: #FFFFFF;
    background-size: 100% 100%;
    border-radius: 10px;

    z-index: 999;

    .citic-title {
      font-size: 20px;
      text-align: center;
      line-height: 45px;
      letter-spacing: 1px;
      color: #f30000;
      margin-bottom: 20px;
    }

    .login-input {
      padding: 0 20px;
    }

    .code-input {
      width: 95%;
      display: inline-block;
      vertical-align: middle;
      // border-color: #64c6de;
      background: url(../../assets/yanzhengma.png) no-repeat 10px;
      padding: 0px 30px;
    }

    .pass-input {
      border-color: #64c6de;
      background: url(../../assets/suo.png) no-repeat 10px;
      padding: 0px 30px;
      /*输入内容左右边距控制*/
    }

    .username-input {
      border-color: #64c6de;
      background: url(../../assets/me.png) no-repeat 10px;
      padding: 0px 30px;
      /*输入内容左右边距控制*/
    }

    .code-image {
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    .login-type {
      text-align: right;
      display: inline-block;
      width: 100%;
    }

    .el-input__inner {
      background-color: #FFFFFF !important;
    }

    .logo-wrapper {
      display: inline-block;
      margin: 10px 0;

      img {
        width: 1.9rem;
        display: inline-block;
        margin: 0.8rem 0.8rem -0.8rem 0.8rem;
        cursor: pointer;

        &.radius {
          border-radius: 50%;
        }
      }
    }
  }

  .login-footer {
    position: fixed;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 0.85rem;
    line-height: 1rem;
    height: 1rem;
  }

  /*   .login-footer1 {
    position: fixed;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    color: white;
    font-size: .85rem;
    line-height: 1rem;
    height: 1rem;
  } */
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .title-container {
    position: absolute;
    top: 20%;
    left: 46%;

    .title {
      font-size: 20px;
      color: #64c6de;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: 600;
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 35px;
      -webkit-background-clip: text;
      letter-spacing: 3px;
    }

    .set-language {
      color: #aaa;
      position: absolute;
      top: 3px;
      font-size: 18px;
      right: 0;
      cursor: pointer;
    }
  }

  .dl-btn {
    // background: url(../../assets/Group-10.png);
    // background-size: 100% 100%;
    border: 0px;
    width: 100%;
    margin-top: 25px;
    background-color: red;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  .login-container1 .el-input input {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 0.7);
    line-height: 17px;
    -webkit-background-clip: text;
    letter-spacing: 3px;
  }

  .el-button {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 10px;
    text-indent: 10px;
  }

  .el-icon-user {
    background: url(../../assets/zhanghu.png) center no-repeat !important;
    background-size: cover !important;
  }

  .el-icon-user:before {
    content: '替' !important;
    font-size: 16px !important;
    visibility: hidden !important;
  }

  .el-icon-key {
    background: url(../../assets/mima.png) center no-repeat !important;
    background-size: cover !important;
  }

  .el-icon-key:before {
    content: '替' !important;
    font-size: 16px !important;
    visibility: hidden !important;
  }

  .el-icon-lock {
    background: url(../../assets/yanzhengma.png) center no-repeat !important;
    background-size: cover !important;
  }

  .el-icon-lock:before {
    content: '替' !important;
    font-size: 16px !important;
    visibility: hidden !important;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }

  @media screen and (max-width: 1100px) {
    .login-info {
      left: 8%;
    }
  }

  @media screen and (max-width: 970px) {
    .login-form {
      left: 50%;
    }

    .login-info {
      display: none;
    }

    .login-form {
      width: 320px;
    }
  }

  @media (max-width: 1024px) and (min-width: 480px) {
    display: flex;
    align-items: center;

    .login-form {
      left: 75%;
      top: 50%;
      margin-top: -140px;
      width: 280px;
      height: 280px;
      padding: 10px;
    }

    .login-info {
      display: none;
    }

    .el-form-item {
      margin-bottom: 20px;
    }

    .el-input {
      font-size: 0.7rem !important;
    }

    .el-form-item__error {
      font-size: 0.75rem !important;
    }

    .el-form-item__content {
      line-height: 10px !important;
      position: relative;
      font-size: 11px !important;
    }

    .el-input__icon {
      line-height: 10px !important;
    }

    .title-container .title {
      font-size: 16px;
      color: rgba(32, 34, 36, 1);
      margin: 0 auto;
      text-align: center;
      font-weight: 600;
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 30px;
      -webkit-sbackground-clip: text;
      letter-spacing: 3px;
    }
  }
}

// .smsCode-input {
//   width: 50%;
//   float: left;
// }
// .smsCode-btn {
//   width: 48%;
//   float: right;
//   margin-right: 0;
//   height: 42px;
//   letter-spacing: 0px !important;
//   text-indent: 0px !important;
//   :after {
//     content: ''; /*设置内容为空*/
//     height: 0; /*高度为0*/
//     line-height: 0; /*行高为0*/
//     display: block; /*将文本转为块级元素*/
//     visibility: hidden; /*将元素隐藏*/
//     clear: both; /*清除浮动*/
//   }
// }
// .mobileCode-input {
//   width: 50%;
//   float: left;
// }
// .mobileCode-btn {
//   width: 140px;
//   float: right;
//   margin-right: 0;
//   height: 42px;
//   letter-spacing: 0px !important;
//   text-indent: 0px !important;
//   :after {
//     content: ''; /*设置内容为空*/
//     height: 0; /*高度为0*/
//     line-height: 0; /*行高为0*/
//     display: block; /*将文本转为块级元素*/
//     visibility: hidden; /*将元素隐藏*/
//     clear: both; /*清除浮动*/
//   }
// }
// .login-container {
//   background: rgba(255, 255, 255, 1);
//   background-size: cover;
//   .header_content {
//     padding-left: 15%;
//   }
//   .img_logo {
//     max-width: 100px;
//     width: 100%;
//     position: absolute;
//     top: 50%;
//     transform: translateY(-50%);
//   }
//   .logo_text {
//     top: 50%;
//     padding-left: 10%;
//     position: absolute;
//     transform: translateY(-50%);
//     font-family: PingFangSC-Semibold, PingFang SC;
//     font-weight: 600;
//     color: rgba(0, 78, 162, 1);
//     -webkit-background-clip: text;
//   }
.login-header {
  height: 8vh;
  position: relative;

  .img_logo {
    max-width: 140px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 240px;
    transform: translateY(-50%);
  }
}

.login-footer {
  width: 100%;
  height: 6vh;
  position: relative;
}

.footer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  letter-spacing: 1px;
}

//   .forget-password {
//     color: #ccc;
//     font-size: 12px;
//     margin: 0;
//     text-align: right;
//     span {
//       cursor: pointer;
//     }
//   }
//   @media screen and (max-width: 767px) {
//     .logo_text {
//       padding-left: 25%;
//     }
//     .footer-text {
//       font-size: 11px;
//     }
//     .el-form-item__content {
//       line-height: 10px !important;
//       position: relative;
//       font-size: 11px !important;
//     }
//     .el-input__icon {
//       line-height: 10px !important;
//     }
//   }
//   @media (min-width: 767px) and (max-width: 1024px) {
//     .logo_text {
//       padding-left: 15%;
//     }
//   }
//   @media screen and (max-width: 400px) {
//     .header_content {
//       padding-left: 5%;
//     }
//     .logo_text {
//       padding-left: 32%;
//     }
//   }
// }
